<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>合同类型</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layui/layui/layui.js"></script>
    <style>
        * {
            font-family: "Microsoft Yahei" !important;
            overflow-y: hidden;
        }

        nav button {
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
            margin-right: 22px;
        }

        nav div {
            float: left !important;
            margin: 15px;
        }

        nav {
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }

        .layui-tab {
            margin: 0;
        }

        .content {
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }

        .layui-tab-content {
            background-color: #F5F7FA;
        }

        .search {
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }

        .one {
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }
        .layui-form-label{
            width: 100px;
        }
    </style>
</head>
<body>
<form class="site-content layui-form">
    <nav>
        <div>合同类型</div>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm addBtn" style="float: right !important;">新建</button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm submit" typeId=""
                style="float: right !important;margin-right: 0;display: none">提交
        </button>
        <div style="float: right !important;display: inline-block;border-bottom: 1px solid #ccc;margin-top: 4px;margin-left: 890px;">
            <input type="text" class="search" placeholder="搜索"/>
            <span style="padding: 5px;color: #999;cursor: pointer;">
                <i class="layui-icon layui-icon-search"></i>
            </span>
        </div>
    </nav>
    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content">
                <div class="content home">
                    <table class="layui-hide" id="plan" lay-filter="plan"></table>
                </div>
                <div class="content add">
                    <form class="layui-form" action="">
                        <div class="layui-form-item" style="margin-top: 40px">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类序号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="typeNo" lay-verify="title" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="typeName" lay-verify="title" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</form>
</body>
<script>
    $('.content').height($(window).height());
    $('.addBtn').click(function () {
        $('[name=typeName]').val(''),
            $('[name=typeNo]').val('')
        if ($(this).text() == '新建') {
            $('.submit').attr('typeText','新建')
            $('.add').show();
            $('.home').hide();
            $('.submit').show();
            $(this).text('返回')
        } else {
            $('.add').hide();
            $('.home').show();
            $('.submit').hide();
            $(this).text('新建')
        }
    });
    layui.use(['form', 'layedit', 'laydate', 'layedit', 'table'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , layedit = layui.layedit
            , table = layui.table;

        layedit.build('texPart'); //建立编辑器
        form.render();
        //日期
        laydate.render({
            elem: '#date'
        });
        table.render({
            elem: '#plan'
            , url: '/contract/selectTypeAll'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'typeNo', title: '序号'}
                , {field: 'typeName', title: '合同分类'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]

        });
        $('.layui-icon-search').click(function () {
            var search = $('.search').val();
            if ($('.search') != '') {
                setTimeout(function () {
                    table.reload('plan', {
                        url: '/contract/selectTypeBy',
                        method: 'post',
                        where: {
                            pageSize: 15,
                            cha: search
                        }
                    })
                }, 100);
            }
        });
        //监听头工具栏事件
        table.on('tool(plan)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    if (obj.length === 0) {
                        layer.msg('请选择一行');
                    } else if (obj.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        $('.submit').attr('typeText','编辑')
                        $('.add').show();
                        $('.home').hide();
                        $('.submit').show();
                        $('.addBtn').text('返回')
                        $.ajax({
                            url: '/contract/selectTypeById',
                            type: 'get',
                            dataType: 'json',
                            data: {
                                TypeId: obj.data.typeId
                            },
                            success: function (data) {
                                $('.submit').attr('typeId', data.object.typeId)
                                $('[name=typeName]').val(data.object.typeName),
                                    $('[name=typeNo]').val(data.object.typeNo)
                            }
                        })
                    }
                    break;
                case 'del':
                    if (obj.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        var ids = [];
                        ids.push(obj.data.typeId);
                        $.ajax({
                            url: '/contract/delType',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                ids: ids
                            },
                            success: function (data) {
                                layer.msg('删除成功！')
                                table.reload("plan", {});
                            }
                        })
                    }
                    break;
            }
            ;
        });
        $('.submit').click(function () {
            if ($(this).attr('typeText')=='新建') {
                $.ajax({
                    url: '/contract/insertType',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        typeName: $('[name=typeName]').val(),
                        typeNo: $('[name=typeNo]').val()
                    },
                    success: function (data) {
                        layer.msg('提交成功！');
                        table.reload("plan", {});
                        $('.add').hide();
                        $('.home').show();
                        $('.submit').hide();
                        $('.addBtn').text('新建');
                    }
                })
            } else {
                $.ajax({
                    url: '/contract/upType',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        typeName: $('[name=typeName]').val(),
                        typeNo: $('[name=typeNo]').val(),
                        typeId: $('.submit').attr('typeId')
                    },
                    success: function (data) {
                        layer.msg('提交成功！');
                        table.reload("plan", {});
                        $('.add').hide();
                        $('.home').show();
                        $('.submit').hide();
                        $('.addBtn').text('新建');

                    }
                })
            }
        })
    });

</script>

</html>
